@extends('layouts.app')
@section('title', '购物车')

@section('content')
    <div class="row">
        <div class="col-lg-10 offset-lg-1">
            <div class="card">
                <div class="card-header">我的购物车</div>
                <div class="card-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="select-all"></th>
                            <th>商品信息</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody class="product_list">
                        @foreach($cartItems as $item)
                            <tr data-id="{{ $item->productSku->id }}">
                                <td>
                                    <input type="checkbox" name="select"
                                           value="{{ $item->productSku->id }}"
                                            {{ $item->productSku->product->on_sale ? 'checked' : 'disabled' }}>
                                </td>
                                <td class="product_info">
                                    <div class="preview">
                                        <a target="_blank"
                                           href="{{ route('products.show', [$item->productSku->product_id]) }}">
                                            <img src="{{ $item->productSku->product->image_url }}">
                                        </a>
                                    </div>
                                    <div @if(!$item->productSku->product->on_sale) class="not_on_sale" @endif>
                                        <span class="product_title">
                                          <a target="_blank"
                                             href="{{ route('products.show', [$item->productSku->product_id]) }}">
                                              {{ $item->productSku->product->title }}
                                          </a>
                                        </span>
                                        <span class="sku_title">{{ $item->productSku->title }}</span>
                                        @if(!$item->productSku->product->on_sale)
                                            <span class="warning">该商品已下架</span>
                                        @endif
                                    </div>
                                </td>
                                <td><span class="price">￥{{ $item->productSku->price }}</span></td>
                                <td>
                                    <input type="text" class="form-control form-control-sm amount"
                                           @if(!$item->productSku->product->on_sale) disabled @endif name="amount"
                                           value="{{ $item->amount }}">
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-danger btn-remove">移除</button>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    <div>
                        <form class="form-horizontal" role="form" id="order-form">
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3 text-md-right">选择收货地址</label>
                                <div class="col-sm-9 col-md-7">
                                    <select class="form-control" name="address">
                                        @foreach($addresses as $address)
                                            <option value="{{ $address->id }}">{{ $address->full_address }} {{ $address->contact_name }} {{ $address->contact_phone }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3 text-md-right">备注</label>
                                <div class="col-sm-9 col-md-7">
                                    <textarea name="remark" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <!-- 优惠码开始 -->
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3 text-md-right">优惠码</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" name="coupon_code">
                                    <span class="form-text text-muted" id="coupon_desc"></span>
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-success" id="btn-check-coupon">检查</button>
                                    <button type="button" class="btn btn-danger" style="display: none;"
                                            id="btn-cancel-coupon">取消
                                    </button>
                                </div>
                            </div>
                            <!-- 优惠码结束 -->
                            <div class="form-group">
                                <div class="offset-sm-3 col-sm-3">
                                    <button type="button" class="btn btn-primary btn-create-order">提交订单</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scriptsAfterJs')
    <script>
        $(document).ready(function () {
            // 监听 移除 按钮的点击事件
            $('.btn-remove').click(function () {
                // $(this) 可以获取当期点击 移除 按钮的 JQuery 对象
                // closest() 方法可以获取到匹配选择器的第一个祖元素 ， 在这里就是当前点击 移除 按钮之上的 <tr> 标签
                // data('id') 方法可以获取到我们之前设置的 data-id 属性的值， 也就是对应的 SKU id
                let id = $(this).closest('tr').data('id');
                swal({
                    title: '确定要删除该商品么？',
                    icon: 'warning',
                    buttons: ['取消', '确认'],
                    dangerMode: true,
                }).then(function (willDelete) {
                    // 如果点击 确认按钮 dillDelete 的值就会是 true  否则为 false
                    if (!willDelete) {
                        return;
                    }
                    axios.delete('/cart/' + id).then(function () {
                        window.location.reload();
                    })
                })
            })
            // 监听 全选/取消全选 单选框的变更事件
            $('#select-all').change(function () {
                // 获取单选框选中状态
                // prop() 方法可以知道标签中是否包含这个属性，当单选框被勾选时，对应的标签就会新增一个 checked 的属性
                let checked = $(this).prop('checked');
                // 获取所以 name=select 并且不带 disabled 属性的勾选框
                // 对于已下架的商品我们不希望对应的勾选框会被选中， 因此我们呢需要加上 :not([disabled]) 这个条件
                $('input[name=select][type=checkbox]:not([disabled])').each(function () {
                    // 将其勾选状态设为与目标单选框一致
                    $(this).prop('checked', checked);
                })
            })

            // 监听 创建订单按钮的点击事件
            $('.btn-create-order').click(function () {
                // 构建请求参数，将用户选着的地址 ID 和备注信息写入请求参数中
                let form = $('#order-form');
                let req = {
                    address_id: form.find('select[name=address]').val(),
                    items: [],
                    remark: form.find('textarea[name=remark]').val(),
                    coupon_code: $('input[name=coupon_code]').val(), // 从优惠码输入框中获取优惠码
                };
                // 遍历 <table> 标签内所以带 data-id 属性的 <tr> ， 也就是每一个购物车中的商品 SKU
                $('table tr[data-id]').each(function () {
                    // 获取当前行的选着框
                    let $checkbox = $(this).find('input[name=select][type=checkbox]');
                    // 如果单选框被禁用或者没有被选中则跳过
                    if ($checkbox.prop('disabled') || !$checkbox.prop('checked')) {
                        return;
                    }
                    // 获取当前行中数量的输入框
                    let $input = $(this).find('input[name=amount]');
                    // 如果用户将数量设为 0 或者不是一个数字，则也跳过
                    if ($input.val() === 0 || isNaN($input.val())) {
                        return;
                    }
                    // 把 SKU id 和数量存入请求放到数组中
                    req.items.push({
                        sku_id: $(this).data('id'),
                        amount: $input.val()
                    })
                });

                axios.post("{{ route('orders.store') }}", req).then(function (response) {
                    swal('订单提交成功', '', 'success').then(() => {
                        window.location.href = '/orders/' + response.data.id
                    });
                }, function (error) {
                    if (error.response.status === 422) {
                        let html = '<div>';
                        _.each(error.response.data.errors, function (errors) {
                            _.each(errors, function (error) {
                                html += error + '<br>';
                            })
                        })
                        html += '</div>'
                        swal({content: $(html)[0], icon: 'error'})
                    } else if (error.response.status === 403) {
                        swal(error.response.data.msg);
                    } else {
                        // 其他情况应该是系统挂掉了
                        swal('系统错误', '', 'error');
                    }
                })
            })

            // 监听 检查按钮点击时间
            $('#btn-check-coupon').click(function () {
                // 获取用户输入的优惠吗
                let code = $('input[name=coupon_code]').val();
                // 如果没有输入则弹出提示
                if (!code) {
                    swal('请输入优惠吗', '', 'warning');
                    return;
                }
                // 调用检查接口
                axios.get('/coupon_codes/' + encodeURIComponent(code)).then(function (result) {
                    console.log(123);
                    $('#coupon_desc').text(result.data.description); // 输出优惠信息
                    $('input[name=coupon_code]').prop('readonly', true); // 禁用输入框
                    $('#btn-cancel-coupon').show(); // 显示 取消 按钮
                    $('#btn-check-coupon').hide(); // 隐藏 检查 按钮
                }, function (error) {
                    // 如果返回码是 404，则说明优惠券不存在
                    if (error.response.status === 404) {
                        swal('优惠吗不存在', '', 'error')
                    } else if (error.response.status === 403) {
                        // 如果返回码是 403, 说明其他条件不满足
                        swal(error.response.data.smg, '', 'error')
                    } else {
                        // 其他错误
                        swal('系统内部错误', '', 'error');
                    }
                });
            });
            // 隐藏 按钮点击事件
            $('#btn-cancel-coupon').click(function () {
                $('#coupon_desc').text(''); // 隐藏优惠信息
                $('input[name=coupon_code]').prop('readonly', false);  // 启用输入框
                $('#btn-cancel-coupon').hide(); // 隐藏 取消 按钮
                $('#btn-check-coupon').show(); // 显示 检查 按钮
            });
        })
    </script>
@endsection
